<template>
  <div class="task_manage">
    <one-title title="任务管理" @refreshData="refresh"></one-title>
    <mes-search-comp
      ref="mesSearch"
      :searchList="tableColumn"
      :searchResult="searchResult"
      @searchInfo="_info">
    </mes-search-comp>
    <div class="table_container">
      <el-table
        border
        stripe
        :data="listData.list"
        v-loading="isLoading"
        style="width: 100%"
        ref="mesTable"
        :max-height="tableMaxHeight"
        @sort-change="_sort"
        @filter-change="handleFilterChange">
        <mes-col-comp
          :key="column.prop"
          v-for="column in tableColumn"
          :column="column"></mes-col-comp>
      </el-table>
    </div>
    <mes-pagination
      @updateData="init"
      :currentPage="listData.pageNo"
      :total="listData.count || 0"
      :pageSize="listData.pageSize">
    </mes-pagination>
  </div>
</template>

<script>
import tableColumn from './tableColumn'

export default {
  name: 'TaskManage',
  mixins: [tableColumn],
  data() {
    return {
      isLoading: true, // 数据加载中
      searchData: {}, // 搜索的字段
      searchResult: NaN, // 搜索结果数
      sortData: {}, // 排序的字段
    }
  },
  computed: {
    // 列表数据
    listData() {
      return this.$store.state.taskManage.listData || {}
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init(page) {
      this.isLoading = true
      let postData = {
        pageNo: page ? page.pageNo : 1,
        pageSize: page ? page.pageSize : this.listData.pageSize || 15,
        sort: this.sortData,
        query: this.searchData
      }
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/task/task/list',
        data: postData,
        module: 'taskManage',
        state: 'listData'
      }).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 刷新
    refresh() {
      this.$refs.mesSearch.clean()
      this.$refs.mesTable.clearSort()
      this.$refs.mesTable.clearFilter()
      this.searchData = {}
      this.sortData = {}
      this.init()
    },
    // 筛选
    handleFilterChange(filters) {
      let query = this.$filterParams(this.tableColumn, filters)
      Object.assign(this.searchData, query.search)
      this.$refs.mesTable.clearSort()
      this.sortData = query.order
      this.init()
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
    // 搜索
    _info(data) {
      this.searchData = data
      this.$refs.mesTable.clearFilter()
      this.$refs.mesTable.clearSort()
      this.sortData = {}
      this.init()
    },
  }
}
</script>

<style scoped lang="less">

</style>
